<template lang="pug">
  v-menu(v-model='datePick', :close-on-content-click='false' :nudge-right='40' transition='scale-transition' offset-y='' min-width='290px')
    template(v-slot:activator='{ on }')
      v-text-field(v-model="value" :label='label' append-icon='event' readonly='' v-on='on' :rules="rules" clearable)
    v-date-picker(v-model="value" @input='datePick = false')
</template>

<script>
  export default {
    name: 'v-date-field',
    model: {
      prop: 'date',
      event: 'input'
    },
    props: ['label', 'rules', 'date'],
    watch: {
      date: {
        handler(val) {
          this.value = val
        },
        immediate: true
      },
      value() {
        this.$emit('input', this.value)
      }
    },
    data() {
      return {
        value: null,
        datePick: false
      }
    }
  }
</script>

<style scoped>

</style>